<template>
    <div id="right-bar">
        <div class="message"><img src="@/assets/img/rightbar/noti_icon.png" alt=""></div>
        <div class="car">
            <router-link to=""  @mouseenter.native="showCart" @mouseleave.native="hideCart"><div class="hover"><img src="@/assets/img/rightbar/car.svg" alt="">
                <p>购</p>
                <p>物</p>
                <p>车</p>
                <p class="cart">{{ $store.getters.cartLength }}</p>
            </div></router-link>
            <a><div class="hover"><p>账户</p><p>中心</p></div></a>
            <a><div class="hover"><p>浏览</p><p>历史</p></div></a>
            <a> <div class="hover" @click="conversation"><img src="@/assets/img/rightbar/message.svg" alt=""><p>在线</p><p>客服</p></div></a>
        </div>
        <chat class="chat" v-show="showChat" @close="conversation"></chat>
    </div>
</template>

<script>
    import {eventBus} from "../../../common/util";
    import {sendwithpost} from "../../../network/profile";
    import Chat from "../chat/Chat";

    export default {
        name: "Right",
        data() {
            return {
                showChat: false,
            }
        },
        components: {
            Chat
        },
        methods: {
            showCart() {
                eventBus.$emit('showCart');
                // if (this.$store.state.lognUser) {
                //     this.$store.dispatch('getCart')
                // }
            },
            hideCart() {
                eventBus.$emit('hideCart')
            },
            conversation() {
                if (this.$store.state.lognUser) {
                    this.showChat = !this.showChat
                }else {
                    this.$message({
                        showClose: true,
                        message: '请先登录！',
                        type: 'warning'
                    })
                }
            },

        }
    }
</script>

<style scoped>
    #right-bar {
        background-color: #000000;
        width: 50px;
        height: 100%;
        position: fixed;
        z-index: 9;
        right: 0;
        font-size: 12px;
        padding-bottom: 1000px;
    }
    #right-bar .car div {
        width: 50px;
        margin: 0 auto;
        text-align: center;
        margin-top: 20px;
        padding: 5px 0px;
    }
    #right-bar div img {
         width: 30px;
     }
    a {
        text-decoration: none;
        color: #ffffff;
    }
    #right-bar .message {
        background-color: rgba(255, 69, 0, 0.9);
        position: absolute;
        width: 60px;
        height: 70px;
        right: 0;
        top: -20px;
        border-radius:15px;
    }
    #right-bar .message img {
        margin: 25px 15px;
    }
    .car {
        margin-top: 100px;
    }
    #right-bar .car {
        line-height: 1em;
        margin-top: 100px;
    }
   #right-bar .hover:hover {
       background-color: rgba(255, 69, 0, 0.9);
   }
   .cart {
       display: block;
       height: 20px;
       width: 20px;
       line-height: 20px;
       background-color: #fff;
       margin: 0 auto;
       border-radius: 50%;
       color: rgb(255, 69, 0);
   }
    .chat {
        position: absolute;
        right: 50px;
        top: 410px;
    }
</style>